import { Toast } from "antd-mobile";
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import bgp from "../../images/bgp1.jpg";
import styles from "./My.module.scss";
class My extends Component {
  handleOrderClick = () => {
    this.props.history.push("order?1");
  };
  handleNavClick1 = () => {
    this.props.history.push("order?2");
  };
  handleNavClick2 = () => {
    this.props.history.push("order?3");
  };
  handleNavClick3 = () => {
    this.props.history.push("order?4");
  };
  handleNavClick4 = () => {
    this.props.history.push("order?5");
  };
  handleAddressClick = () => {
    this.props.history.push("address");
  };
  handleLikeClick = () => {
    this.props.history.push("like");
  };
  handleSetClick = () => {
    this.props.history.push("set");
  };
  handleToastClick = () => {
    Toast.info("敬请期待");
  };
  componentDidMount() {
    let token = localStorage.getItem("token");
    if (!token) {
      this.props.history.push("login");
    }
  }

  render() {
    return (
      <div className={styles.xmMy}>
        {/* 背景图开始 */}
        <div className={styles.xmMyBgp}>
          <img src={bgp} alt="" />
        </div>
        {/* 背景图结束 */}
        {/* 订单状态栏开始 */}
        <div className={styles.orderStatus}>
          <div className={styles.awaitPay} onClick={this.handleNavClick1}>
            <i className={"iconfont icon-daifukuan " + styles.icon}></i>
            <div className={styles.awaitPayText}>待付款</div>
          </div>
          <div className={styles.awaitSend} onClick={this.handleNavClick2}>
            <i className={"iconfont icon-shinshopdaifahuo " + styles.icon}></i>
            <div className={styles.awaitSendText}>待发货</div>
          </div>
          <div className={styles.isSend} onClick={this.handleNavClick3}>
            <i className={"iconfont icon-yifahuo " + styles.icon}></i>
            <div className={styles.isSendText}>已发货</div>
          </div>
          <div className={styles.isFinish} onClick={this.handleNavClick4}>
            <i className={"iconfont icon-bao " + styles.icon}></i>
            <div className={styles.isFinishText}>已完成</div>
          </div>
        </div>
        {/* 订单状态栏结束 */}
        {/* 全部订单开始 */}
        <div className={styles.allOrder} onClick={this.handleOrderClick}>
          <div className={styles.allOrderLeft}>
            <i className={"iconfont icon-quanbudingdan-copy-copy"}></i>
            全部订单
          </div>
          <div className={styles.allOrderRight}>
            <i className={"iconfont icon-youjiankuohao"}></i>
          </div>
        </div>
        {/* 全部订单结束 */}
        {/* 更多设置开始 */}
        <div className={styles.moreSets}>
          <div className={styles.moreSetItems} onClick={this.handleAddressClick}>
            <div className={styles.setItemsLeft}>
              <i className={"iconfont icon-dizhi"}></i>
              收货地址
            </div>
            <div className={styles.setItemsRight}>
              <i className={"iconfont icon-youjiankuohao"}></i>
            </div>
          </div>
          <div className={styles.moreSetItems} onClick={this.handleLikeClick}>
            <div className={styles.setItemsLeft}>
              <i className={"iconfont icon-xingxing"}></i>
              喜欢的商品
            </div>
            <div className={styles.setItemsRight}>
              <i className={"iconfont icon-youjiankuohao"}></i>
            </div>
          </div>
          <div className={styles.moreSetItems} onClick={this.handleToastClick}>
            <div className={styles.setItemsLeft}>
              <i className={"iconfont icon-jifen"}></i>
              我的积分
            </div>
            <div className={styles.setItemsRight}>
              <i className={"iconfont icon-youjiankuohao"}></i>
            </div>
          </div>
          <div className={styles.moreSetItems} onClick={this.handleToastClick}>
            <div className={styles.setItemsLeft}>
              <i className={"iconfont icon-qian"}></i>
              我的优惠券
            </div>
            <div className={styles.setItemsRight}>
              <i className={"iconfont icon-youjiankuohao"}></i>
            </div>
          </div>
          <div className={styles.moreSetItems} onClick={this.handleToastClick}>
            <div className={styles.setItemsLeft}>
              <i className={"iconfont icon-liwu"}></i>
              我收到的礼物
            </div>
            <div className={styles.setItemsRight}>
              <i className={"iconfont icon-youjiankuohao"}></i>
            </div>
          </div>
          <div className={styles.moreSetItems} onClick={this.handleSetClick}>
            <div className={styles.setItemsLeft}>
              <i className={"iconfont icon-shezhi"}></i>
              设置
            </div>
            <div className={styles.setItemsRight}>
              <i className={"iconfont icon-youjiankuohao"}></i>
            </div>
          </div>
        </div>
        {/* 更多设置结束*/}
      </div>
    );
  }
}
export default withRouter(My);
